<template>
	<view class="box ">
		 
		<view class="content-box padding-l-r-30">
			<view class="list-box">
				<text>类型</text>
				<view class="input-box" @click="selectType ">
					<input type="text" v-model="form.house_tag" disabled placeholder="请选择">
					<image src="/static/image/triage/down.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="list-box">
				<text>姓名</text>
				<view class="input-box">
					<input type="text" v-model="form.name" placeholder="请填写姓名">
				</view>
			</view> 
			<view class="list-box">
				<text>联系方式</text>
				<view class="input-box">
					<input type="number" v-model="form.contact" placeholder="请填写联系方式">
				</view>
			</view>
			<view class="list-box">
				<text>户型</text>
				<view class="input-box">
					<input type="text" v-model="form.house_type" placeholder="请填写户型">
				</view>
			</view>
			<view class="list-box">
				<text>面积</text>
				<view class="input-box">
					<input type="number" v-model="form.acreage" placeholder="请填写面积">
					<text>m²</text>
				</view>
			</view>
			<view class="list-box">
				<text>预期价位</text>
				<view class="input-box">
					<input type="number" v-model="form.expect_price" placeholder="请填写预期价位">
                    <text>万</text>
				</view>
			</view>
			<view class="list-box">
				<text>备注</text>
				<view class="input-box">
					<input type="text" v-model="form.remark" placeholder="请填写备注">
				</view>
			</view> 
			<view class="list-btn" @click="reservation">
				立即预约
			</view>
		</view>
		 <u-popup :show="show" mode="bottom"  :round="10">
		    <view class="popup-box bg-f7 flex-column border-radio-20">
		        <view class="title-text fs-34 color-0 fw-b">类型</view>
				<view class="flex-box">
					<view class="type-box fs-28 color-333">
						<view :class="{'active' :type==2}" @click="getType('type' ,2)">二手房买卖</view> 
						<view :class="{'active' :type==1}" @click="getType('type' ,1)">房屋租赁</view>
					</view>
					<view class="flex-1 lease-box flex-box fs-28 color-0">
						<view v-if="type==2" :class="{'active' :lease==1}" @click="getType('lease' ,1)">我要买房</view>
						<view v-if="type==2" :class="{'active' :lease==2}" @click="getType('lease' ,2)">我要卖房</view>
						<view v-if="type==1" :class="{'active' :lease==3}" @click="getType('lease' ,3)">我要租房</view>
						<view v-if="type==1" :class="{'active' :lease==4}" @click="getType('lease' ,4)">我要出租</view>
					</view>
				</view>
				<view class="btn-box bg-white fs-28 color-43 justifyContent-spaceBetween flex-1">
					<view class="flex-1 border-radio-14 color-43 cancel-box" @click="cancel">取消</view>
					<view class="flex-1 color-white bg-43 border-radio-14" @click="confirm">确定</view>
				</view>
			</view>
		</u-popup>
		<toastTip ref="toastTip" @btnClick='btnClick' />
	</view>
</template>

<script>
    import {houseAdd} from "@/api/house";
    import toastTip from "../../components/toast/index.vue"
	export default {
		components: {
			toastTip
		},
		data() {
			return {
				show: false,
				type:2,
				form: {
					department: '',
					departmentId: '',
					name: '',
					age: "",
					contact: '',
					sex: '',
					house_type: '',
					acreage:'',
					expect_price:'' ,
					remark:'',
                    house_tag:''
				},
				popupShow: false,
				lease:''
			}
		},
		methods: {
			confirm(e) {
				this.form.department = e.value[0].label
				this.form.departmentId = e.value[0].id
				this.show = false
			},
			rightClick() {
				uni.navigateBack()
			},
			reservation() {
                if (!this.form.house_tag) {
                    uni.showToast({
                        icon: 'none',
                        title: "请选择类型"
                    })
                    return
                }
                if (!this.form.name) {
                    uni.showToast({
                        icon: 'none',
                        title: "请填写姓名"
                    })
                    return
                }
                if (!this.form.contact) {
                    uni.showToast({
                        icon: 'none',
                        title: "请填写联系方式"
                    })
                    return
                }
                if (!this.form.house_type) {
                    uni.showToast({
                        icon: 'none',
                        title: "请填写户型"
                    })
                    return
                }
                if (!this.form.acreage) {
                    uni.showToast({
                        icon: 'none',
                        title: "请填写面积"
                    })
                    return
                }
				houseAdd(this.form).then(res=>{
                    if (res.code==1){
                        this.$refs.toastTip.getInfo(true, ['您的申请已提交，稍后会 ', '有工作人员与您联系'], '返回首页')
                    }else {
                        uni.showToast({
                            icon: 'none',
                            title: res.msg
                        })
                    }
                })
				

			},
			btnClick(){
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			getType(type,index){
				this[type] = index
			},
			selectType(){
				this.show = true
				this.type =2
				this.lease =1
			},
			confirm(){
				let type = '', lease = ''
				if(this.type ==1){
					type = '房屋租赁'
                    if (this.lease < 3){
                        this.lease=''
                        lease = ''
                    }
				}else if(this.type ==2){
					type = '二手房买卖'
                    if (this.lease > 2){
                        this.lease=''
                        lease = ''
                    }
				}
                console.log(this.lease)
				if(this.lease ==1){
					lease = '我要买房'
				}else if(this.lease ==2){
					lease = '我要卖房'
				}else if(this.lease ==3){
					lease = '我要租房'
				}else if(this.lease ==4){
					lease = '我要出租'
				}
                if (!type ){
                    uni.showToast({
                        icon: 'none',
                        title: "请选择类型"
                    })
                    return
                }
                if (!lease){
                    uni.showToast({
                        icon: 'none',
                        title: "请选择类型"
                    })
                    return
                }
				this.form.house_tag = type + " " + '|'+ " " + lease
				this.show= false
			},
			cancel(){
				this.show= false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index-bg {
		position: relative;

		.index-text {
			position: absolute;
			left: 50rpx;
			bottom: 56rpx;

			text {
				display: block;
				font-weight: bold;
				font-size: 50rpx;
				color: #FFFFFF;
			}
		}
	}

	.list-box {
		text {
			font-size: 28rpx;
			color: #000;
			line-height: 90rpx;
		}
	}

	.input-box {
		display: flex;
		align-items: center;
		height: 90rpx;
		padding: 0 20rpx;
		background: #FFFFFF;
		border-radius: 14rpx;
		border: 1px solid #DBDBDB;

		input {
			flex: 1;
		}

		image {
			width: 30rpx;
		}
	}

	.list-btn {
		height: 90rpx;
		margin-top: 68rpx;
		background: #43ABC4;
		border-radius: 14rpx;
		color: #fff;
		line-height: 90rpx;
		font-size: 28rpx;
		text-align: center;
	}
	.popup-box { 
		height: 660rpx;
		// background: #F7F7F7; 
		.title-text {
			height: 135rpx;
			padding: 30rpx 0 50rpx;
			text-align: center;
		}
		.flex-box {
			height: 293rpx;
		}
		.lease-box {
			flex-wrap: wrap;
			view {
				width: 200rpx;
				height: 80rpx;
				margin-left: 30rpx;
				background: #FFFFFF;
				border-radius: 40rpx;
				border: 1px solid #DBDBDB;
				text-align: center;
				line-height: 80rpx;
				&.active {
					background: #EFFBFE;
					border-color: #43ABC4;
					color: #43ABC4;
				}
			}
		}
		.type-box {
			min-width: 200rpx; 
			background: #FFFFFF;
			border-radius: 0 x 20rpx 0  0 ;
			view {
				position: relative;
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				&:first-child {
					&::after {
						content: '';
						position: absolute;
						bottom: 0;
						left: 50%;
						transform: translateX(-50%);
						width: 130rpx;
						height: 1px;
						background: #DBDBDB;
						border-radius: 0;
					}
				}
			}
			.active {
				color: #43ABC4;
				&:before{
					content: '';
					position: absolute;
					left:0;top: 50%;
					width: 4rpx;
					height: 60rpx;
					background: #43ABC4; 
					transform: translateY(-50%);
				}
			}
		}
		.btn-box {
			line-height: 90rpx;
			padding: 10rpx 25rpx ;
			text-align: center;
			.flex-1 {
				height: 90rpx;
				max-width: 340rpx;
			}
			.cancel-box {
				border: 1px solid #43ABC4;
				background: #EFFBFE;
			}
		}
	}
</style>